<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item style="font-weight: 700" label="到店时间">
                <el-date-picker v-model="createTime" type="daterange" range-separator="-"
                    start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd mm:ss">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-select v-model="formInline.dateStatus" placeholder="请选择类型">
                    <el-option label="日盈利额" :value="0"></el-option>
                    <el-option label="周盈利额" :value="1"></el-option>
                    <el-option label="月盈利额" :value="2"></el-option>
                    <el-option label="年盈利额" :value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="searchFn">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="ResetFn">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="statisticalDate"
        label="统计日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="statisticalAmount"
        label="盈利金额"
       >
      </el-table-column>

    </el-table>
    <div class="page">
                <el-pagination :page-size="formInline.pageSize" :page-sizes="[10, 20, 30, 50]" background
                    :current-page="currentPage" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
    </div>
</template>

<script>
import {storeincomeAPI,searchStoreIncomeAPI} from "@/API/hbaip/api";
    export default {
        data(){
            return{
                tableData:[],
                currentPage:1,
                total:0,
                createTime: [],
                formInline: {
                pageNum: 1,
                pageSize: 10,
                dateStatus: 0,
                startTime: "",
                endTime: "",

            },
            }
        },
        created(){
       this.getStoreIncome()
        },
        methods:{
            handleSizeChange(val) {
                storeincomeAPI({
                dateStatus: this.formInline.auditType,
            pageNum: this.formInline.pageNum,
            pageSize: val,
            }).then((d) => {
                this.tableData=d.data.list
            this.total=d.data.total
            });
            this.formInline.pageSize=val
        },
        handleCurrentChange(val) {
           storeincomeAPI({
            dateStatus: this.formInline.auditType,
            pageNum: val,
            pageSize: this.formInline.pageSize,
            }).then((d) => {
                this.tableData=d.data.list
            this.total=d.data.total
            });
            this.formInline.pageNum = val;
        },
        // 重置
            ResetFn() {
                this.createTime=[]
                this.formInline.dateStatus=0
            this.getStoreIncome();
        },
            // 搜索
            searchFn(){
                this.formInline.startTime = this.createTime[0]
            this.formInline.endTime = this.createTime[1]
                searchStoreIncomeAPI(
           this.formInline
        ).then((res)=>{
            this.tableData=res.data.list
            this.total=res.data.total
        })
            },
            async getStoreIncome(){
    let res =await storeincomeAPI({
            dateStatus: this.formInline.dateStatus,
            pageNum: this.formInline.pageNum,
            pageSize: this.formInline.pageSize,
        })
       this.tableData=res.data.list
       this.total=res.data.total
}
        }
    }
</script>

<style lang="less" scoped>
/deep/ .el-date-editor{
    width: 240px;
}
/deep/ .el-select{
    width: 176px;
}
/deep/ .el-table .el-table__header-wrapper th {
            background-color: #f8f8f9;
            color: #515a6e;
            height: 40px;
            font-size: 13px;
            font-weight: 700;
        }

 .page {
        padding: 20px;
        display: flex;
        justify-content: flex-end;
        }
</style>